<template>
 <div>
  御剑乘风来,除魔天地间!===app
  <input type="text" v-focus="111">
  <h3 v-ff="valF">我是h3标签</h3>
  <hr>
  <ul>
    <li v-for="item in list" :key="item.id"><img :src="item.img" width="200px" alt="">{{item.title}}
    </li>
  </ul>
  <!-- //防尘罩 页面运行现在正在加载...... -->
  <!-- <div v-loading="list.length==0"></div> -->
  <!-- <div v-loading></div> -->

  <!-- 图片加载失败指令 -->
  <!-- <img v-imgError="'http://ajax-api.itheima.net/images/6.webp'" src="http://ajax-api.itheima.net/images1/0.webp" alt=""> -->
  <img v-imgError="imgDefult" src="http://ajax-api.itheima.net/images1/0.webp" alt="">
 </div>
</template>
<script>
import imgDefult from './assets/logo.png'
import axios from 'axios'
export default{
    name:'',
    //局部注册自定义指令语法{}
    directives:{
      ff:{
        inserted(el,binding){
          el.innerText=binding.value
        }
      },
      loading:{
        inserted(el,binding){
          el.innerHTML='正在加载中......'
          el.classList.add('active')
        },
        update(el,binding){
           console.log(el,binding.value,'1111222');
           setTimeout(()=>{
            el.style.display='none'
           },3000)
            // setTimeout(()=>{
          //  if(!binding.value){
          //    el.style.display='none'
          //  }
          //  },3000)

        }
      },
      imgError:{
        inserted(el,binding){
          el.onerror=function(){
            el.src=binding.value
          }

        }
      }

    },
    data () {
        return {
          valF:'我是自定义指令,来改变h3标签内容',
          list:[],
          imgDefult
            
        }
    },
    created () {
      this.getNews()
    },
    computed:{
    },
    methods:{
    async  getNews(){
        const res=await axios.get('http://hmajax.itheima.net/api/news')
        console.log(res.data.data);
        this.list=res.data.data
      }
    }
}
</script>
<style lang='less'  scoped>
.active{
  width: 100vw;
  height: 100vh;
  background:rgba(158, 156, 156, 0.8);
  z-index:999;
  position: fixed;
  top: 0;
  left:0;
  text-align: center;
  line-height: 100vh;
 }
    
</style>
